<!DOCTYPE html>
<html>

<head>
  <% include global/meta.html %>
    <% include global/top-css.html %>
      <title>yuscms</title>
</head>

<body>

            <main class="main" data-info="<%=admin.permission%>">
              <div class="ys-admin-pos c-a1a3aa">
                首页
                <span class="f-sum">></span>
                <span class="c-565b6d">单页栏目管理</span>
                <span class="f-sum">></span>
                <span class="c-565b6d">更新</span>
              </div>

              <div class="ys-admin-tablist">
                <div class="ys-admin-tab-header row justify-content-b">
                  <p class="f-14 c-565b6d pl-8 pt-6"></p>
                </div>

                <div class="mr-10 ml-10 overflow-h pb-20" v-loading="loading">
                  <form @submit.prevent="checkForm" name="form">
                    <ul class="overflow-h pb-20">

                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">上级栏目</label>
                        </div>

                        <div class="col-10">
                          <div class="select flex row">
                            <select class="flex bg-f2f2f2" name="pid" disabled="disabled" v-model="params.pid" v-html="optionRender()">
                            </select>
                          </div>
                        </div>
                      </li>

                      <li class="row  pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">栏目名称</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="nav_name" class="input" v-model="params.nav_name" />
                        </div>
                      </li>

                      <li class="row  pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">栏目描述</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="nav_info" v-model="params.nav_info" class="input" />
                        </div>
                      </li>

                      <li class="row  pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">栏目排序</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="nav_sort" v-model="params.sort" class="input" />
                        </div>
                      </li>

                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">标　　题</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="title" v-model="params.title" class="input" value="" />
                        </div>
                      </li>

                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">来　　源</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="source" v-model="params.source" class="input" value="" />
                        </div>
                      </li>

                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">作　　者</label>
                        </div>
                        <div class="col-10">
                          <input type="text" name="author" v-model="params.author" class="input" value="" />
                        </div>
                      </li>
                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">发布时间</label>
                        </div>

                        <div class="col-10">
                          <el-date-picker v-model="params.date" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
                          </el-date-picker>
                        </div>
                      </li>

                      <li class="row pd-10 f-14">
                        <div class="col-hd">
                          <label class="label">栏目内容</label>
                        </div>

                        <div class="col-bd c-666">
                          <div id="editor" class="pos-r z1"></div>
                          <input type="hidden" name="content" value="" v-model="params.content">
                        </div>
                      </li>


                      <li class="pd-10 mt-10">
                        <div class="col-hd">
                          &nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="col-bd row ml-35">
                          <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                          <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
                        </div>
                      </li>

                    </ul>
                  </form>
                </div>
              </div>
            </main>
       
  <% include global/all-js.html %>
    <script>
      var vm = new Vue({
        el: '.main',
        data: {
          loading: true,
          list: [],
          params: {
            id: $m.getParams('id'),
            nav_name: "",
            nav_info: "",
            sort: 1,
            pid: "0",
            level: 1,
            title: "",
            source: "yuscms",
            author: "admin",
            date: new Date(),
            content: ""
          }
        },
        methods: {

          queryById() {
            let _this = this;
            axios
              .get("/api/admin/category/queryPageById", {
                params: { id: _this.params.id }
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  _this.params = filterData.data[0];
                  if (filterData.data[0].pid != 0) {
                    _this.params.pid =
                      filterData.data[0].pid + "," + (filterData.data[0].level - 1);
                  }
                  let cont = filterData.cont[0];
                  _this.params.title = cont.title;
                  _this.params.source = cont.source;
                  _this.params.author = cont.author;
                  _this.params.date = cont.date;
                  _this.params.content = cont.content;
                  this.editor();
                  _this.loading = false;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                le.error(error);
              });
          },
          getData() {
            var _this = this;
            axios
              .get("/api/admin/category")
              .then(data => {
                var filterData = data.data;
                if (filterData.success) {
                  _this.list = filterData.data;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                le.error(error);
              });
          },

          optionRender: function () {
            let list = this.list;
            let str = '<option selected="selected" value="0">顶部导航</option>';

            function option(list) {
              for (var item of list) {
                if (item.pid != 0) {
                  str += `<option value="${item.id}${"," +
                    item.level}">${"&nbsp;&nbsp;".repeat(
                      item.level
                    )}|-${item.nav_name}</option>`;
                } else {
                  str += `<option value="${item.id}${"," +
                    item.level}">${item.nav_name}</option>`;
                }
                if (item.children) {
                  option(item.children);
                }
              }
            }
            option(list);
            return str;
          },

          editor: function () {
            var _this = this;

            var editor = new wangEditor("#editor");
            editor.customConfig.debug = true;
            editor.customConfig.uploadImgServer = "/api/admin/upload/img"; //上传到服务器API地址
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 5;
            editor.customConfig.linkCheck = function (text, link) {
              return true;
            };
            editor.create();

            editor.txt.html(_this.params.content);
            $(".w-e-text").on("input", function () {
              _this.params.content = editor.txt.html();
            });
          },

          categoryEdit() {
            let _this = this;
            let params;

            if (_this.params.pid.toString().includes(",")) {
              params = {
                nav_name: _this.params.nav_name,
                nav_info: _this.params.nav_info,
                sort: 1,
                pid: _this.params.pid.split(",")[0],
                level: parseInt(_this.params.pid.split(",")[1]) + 1
              };
            } else {
              params = _this.params;
            }

            params.title = _this.params.title;
            params.source = _this.params.source;
            params.author = _this.params.author;
            params.date = _this.params.date;
            params.content = _this.params.content;

            axios
              .post("/api/admin/category/page-edit", params)
              .then(data => {
                let filterData = data.data;
                if (filterData.data.affectedRows === 1) {
                  tips(_this, "更新成功^_^");
                  _this.$router.go(-1);
                }
              })
              .catch(error => {
                console.error(error);
              });
          },
          checkForm: function () {
            var _this = this;
            if (!hasPermission("2")) {
              tipsWarn(_this, "对不起,您没有操作权限^_^");
              return;
            }
            var fm = document.form;

            if (_this.params.nav_name == "") {
              _this.tipsWarn("栏目名称不能为空");
              fm.nav_name.focus();
              return false;
            }

            if (_this.params.sort == "") {
              _this.tipsWarn("排序不能为空");
              fm.sort.focus();
              return false;
            }

            if (_this.params.title == "") {
              _this.tipsWarn("标题不能为空");
              fm.title.focus();
              return false;
            }

            if (_this.params.content == "") {
              _this.tipsWarn("内容不能为空");
              fm.content.focus();
              return false;
            }

            if (_this.params.date == "") {
              _this.tipsWarn("日期不能为空");
              fm.date.focus();
              return false;
            }

            this.categoryEdit();
          }
        },

        created: function () {
          this.queryById();
          this.getData();
        },
        mounted: function () {}
      });
    </script>
</body>

</html>